<template>
  <div class="upload">
    <div v-if="show">正在上传中... 当前上传成功数:{{ imgSuccessNum }} 当前上传失败数:{{ imgErrorNum }}</div>
    <div v-if="toptitle" style="padding-left: 20px">{{ toptitle }}</div>
    <el-upload
      ref="upload"
      :accept="accept"
      :action="action"
      :auto-upload="true"
      class="upload-content"
      :class="{ hide: fileList.length == limit }"
      :close-on-click-modal="false"
      :data="data"
      :file-list="fileList"
      :headers="headers"
      :limit="limit"
      :list-type="accept === 'image/png, image/jpeg' ? 'picture-card' : 'text'"
      :multiple="true"
      name="File"
      :on-change="handleChange"
      :on-exceed="handleExceed"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-error="handleError"
      :show-file-list="true"
      style="display: inline"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="trigger" v-if="accept === 'image/png, image/jpeg'">
        <i class="el-icon-plus"></i>
        <el-dialog append-to-body title="查看大图" :visible.sync="dialogVisible">
          <div>
            <img :src="dialogImageUrl" width="100%" />
          </div>
        </el-dialog>
      </div>

      <el-button v-else slot="trigger" size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'VabUpload',
    props: {
      accept: {
        type: String,
        default: 'image/png, image/jpeg',
        required: false,
      },
      toptitle: {
        type: String,
        default: null,
        required: false,
      },
      url: {
        type: String,
        default: '/upload',
        required: false,
      },
      name: {
        type: String,
        default: 'File',
        required: true,
      },
      limit: {
        type: Number,
        default: 50,
        required: true,
      },
      size: {
        type: Number,
        default: 1,
        required: true,
      },
      imgfileList: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        show: false,
        loading: false,
        dialogVisible: false,
        dialogImageUrl: '',
        action: 'https://ds.muqian.top/Upload/File',
        headers: {},
        fileList: this.imgfileList,
        picture: 'picture',
        imgNum: 0,
        imgSuccessNum: 0,
        imgErrorNum: 0,
        typeList: null,
        title: '上传',
        data: {
          filename: 'ZYTBimgs',
        },
      }
    },
    watch: {
      imgfileList(newvel) {
        this.fileList = newvel
        this.imgNum = this.fileList.length
      },
      // fileList(newvel) {
      //   console.log(newvel, newvel.length)
      // },
    },
    computed: {
      percentage() {
        if (this.allImgNum == 0) return 0
        return this.$baseLodash.round(this.imgNum / this.allImgNum, 2) * 100
      },
    },
    methods: {
      // selfUpload(e) {
      //   this.handleProgress()
      //   let that = this
      //   var formData = new FormData()
      //   formData.append('File', e.file)
      //   axios
      //     .post('http://localhost:8080/Upload/File', formData)
      //     .then((response) => {
      //       console.log(response)

      //       that.handleSuccess(that.fileList)
      //     })
      //     .catch((error) => {
      //       console.log(error)
      //       that.handleError()
      //     })
      // },
      handleProgress() {
        this.loading = true
        this.show = true
      },
      handleChange(file, fileList) {
        if (file.size > 1048576 * this.size) {
          fileList.map((item, index) => {
            if (item === file) {
              fileList.splice(index, 1)
            }
          })
          this.fileList = fileList
        } else {
          this.allImgNum = fileList.length
        }
      },
      handleSuccess(res, file, fileList) {
        console.log(res, file, fileList)

        let that = this
        this.fileList = fileList
        this.imgNum = this.imgNum + 1
        this.imgSuccessNum = this.imgSuccessNum + 1
        if (fileList.length === this.imgNum) {
          setTimeout(() => {
            this.$baseMessage(`上传完成! 共上传${fileList.length}张图片`, 'success')
          }, 1000)
          that.$emit('succestList', fileList)
        }
        setTimeout(() => {
          this.loading = false
          this.show = false
        }, 1000)
      },
      handleError() {
        this.imgNum = this.imgNum + 1
        this.imgErrorNum = this.imgErrorNum + 1
        this.$baseMessage(`文件[${file.raw.name}]上传失败,文件大小为${this.$baseLodash.round(file.raw.size / 1024, 0)}KB`, 'error')
        setTimeout(() => {
          this.loading = false
          this.show = false
        }, 1000)
      },
      handleRemove(index) {
        let img = this.fileList[index]
        this.fileList.splice(index, 1)

        this.imgNum = this.imgNum - 1
        this.allNum = this.allNum - 1
      },
      handlePreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      handleExceed(files, fileList) {
        this.$baseMessage(
          `当前限制选择 ${this.limit} 个文件，本次选择了
             ${files.length}
             个文件`,
          'error'
        )
      },
      handleShow(data) {
        this.title = '上传'
        this.data = data
      },
    },
  }
</script>

<style lang="scss" scoped>
  .upload {
    .videoli {
      position: relative;
      width: 180px !important;
      height: 128px !important;
      .audioplay {
        position: absolute;
        top: 20%;
        right: 38%;
        z-index: 5000;
        color: #d8d8d8;
        font-size: 70px;
      }
      .videodelete {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        opacity: 0.8;
        background-color: #000;
        i {
          cursor: pointer;
          color: red;
          font-size: 25px;
        }
      }
    }

    .el-upload__tip {
      display: block;
      height: 30px;
      line-height: 30px;
    }
    .hide {
      ::v-deep .el-upload--picture-card {
        display: none !important;
      }
    }
    ::v-deep {
      .el-upload--picture-card {
        width: 128px;
        height: 128px;
        margin: 3px 8px 8px 8px;
        border: 2px dashed #c0ccda;
      }

      .el-upload-list--picture {
        margin-bottom: 20px;
      }

      .el-upload-list--picture-card {
        .el-upload-list__item {
          width: 128px;
          height: 128px;
          margin: 3px 8px 8px 8px;
        }
        .el-loading-spinner {
          pointer-events: none;
          transform: translate(-130px, -60px);
        }
      }
      .el-button {
        margin-left: 10px;
      }
    }
  }
</style>
